<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>首页</title>
    <link rel="stylesheet" href="../lib/layui/css/layui.css" />
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/index.css" />
  </head>

  <body>
    <div class="header container">
      电商平台
      <p class="off active">你好, <a href="./login.html" style="text-decoration: underline;">请登录</a></p>
      <p class="on">
        你好,
        <span class="nickname">用户昵称</span>
        <button class="self">个人中心</button>
        <button class="logout">退出登录</button>
      </p>
    </div>
    <div class="list container"><a href="./list.html" style="font-size: 20px; text-decoration: underline;">购买商品</a></div>

    <div class="layui-carousel container" id="carousel">
      <div carousel-item></div>
    </div>
    <script src="../lib/layui/layui.js"></script>
    <script src="../lib/jquery.js"></script>
    <script src="../lib/axios.js"></script>
    <script>
      $(function () {
        var nickName = sessionStorage.getItem("nickname");
        if (!nickName) {
          $(".off").addClass("active").siblings().removeClass("active");
        } else {
          $(".on").addClass("active").siblings().removeClass("active");
          $(".nickname").text(nickName);
        }
        axios
          .get("http://localhost:9000/carousel/list")
          .then(function (response) {
            if (response.data.code === 1) {
              var imagesHtml = response.data.list
                .map(function (item) {
                  return `<div><img src="http://localhost:9000/${item.name}" /></div>`;
                })
                .join("");
              $("#carousel div").html(imagesHtml);
              layui.carousel.render({
                elem: "#carousel",
                width: "1200px",
                height: "600px",
                arrow: "hover",
                anim: "fade",
              });
            }
          })
          .catch(function (error) {
            console.error("error:", error);
          });

        $(".self").on("click", function () {
          window.location.href = "./self.html";
        });

        $(".logout").on("click", function () {
          var token = sessionStorage.getItem("token");
          var id = sessionStorage.getItem("id");
          axios
            .get("http://localhost:9000/users/logout", {
              headers: {
                Authorization: token,
              },
              params: {
                id,
              }
            })
            .then(function (response) {
              if (response.data.code === 1) {
                sessionStorage.clear();
                window.location.href = "./index.html";
              }
            })
            .catch(function (error) {
              console.error("error:", error);
            });
        });
      });
    </script>
  </body>
</html>
